<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>摇红包</title>
    <link rel="stylesheet" href="../mui/css/mui.min.css" type="text/css" />
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>

<body>
<header class="mui-bar mui-bar-nav help-bar">
	<a class="mui-action-back"><i class="icon icon-back"></i></a>
	<h1 class="mui-title">摇红包</h1>
    <div class="top-right">
    	<a href="摇红包-规则.html">规则</a>
    </div>
</header>
<div class="mui-content">
	<div class="full-page enve-bg">
    	<div class="enve-top">
        	<div class="eet-peop"><img src="../images/envelop/enve-peop1.png" alt="" /></div>
            <div class="eet-tl">
                <div class="eet-bar" style="width:100%;"></div>
            	<div class="eet-l">体力</div>
                <div class="eet-r"><i class="icon icon-tl"></i>x<label class="eet-power">100</label></div>
            </div>
        </div>
        <div class="enve-box">
        	<div class="enve-big">
            	<ul id="envebig">
                	<li></li>
                	<li><img src="../images/p-male.png" alt="" /><span class="mr10">幸福一家人</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack-b"></i>利率红包</li>
                </ul>
            </div>
            <div class="enve-quee">
                <ul class="enve-ul" id="envelist">
                	<li></li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉花茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                    <li>
                        <div><img src="../images/p-male.png" alt="" /><span class="mr10">茉莉</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>
                    </li>
                </ul>
        	</div>
        </div>
    </div>
    
    <!--开红包-->
    <div class="shake-pop c-hide">
    	<a href="javascript:;" class="shake-close"><i class="icon icon-jsclose"></i></a>
    	<div class="shake-top"><a href="javascript:;" class="shake-open"></a></div>
        <div class="shake-bot">
        	<p><img src="../images/p-male.png" alt="" /></p>
            <p class="mt5 c-bold">Adhub</p>
            <p>给您发了一个利率红包</p>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../mui/js/mui.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript">
$(function(){
	$('.enve-box').height($(window).height() - $('.enve-top').innerHeight() - 44);
	$(window).resize(function(){
		$('.enve-box').height($(window).height() - $('.enve-top').innerHeight() - 44);
	});
	
	var bml = '<img src="../images/p-male.png" alt="" /><span class="mr10">幸福一家人</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack-b"></i>利率红包';
	var int2 = setInterval(function(){
		bigList(envebig,bml);
	},3600);
	
	var rml = '<div><img src="../images/p-male.png" alt=""><span class="mr10">茉莉花</span>摇到了1个 <span class="c-ffe790">1.26%</span><i class="icon icon-pack"></i>利率红包</div>';
	var int1 = setInterval(function(){
		riseList(envelist,rml);
	},2100);
});

function bigList(dom,val){
	var bigul = $(dom);
	bigul.find('li:eq(0)').html(val);
	bigul.animate({top:"0"},300);
	setTimeout(function(){
		bigul.css('top','-46px').prepend('<li></li>').find('li:eq(2)').remove();
	},1000);
}

function riseList(dom,val){
	var riseul = $(dom);
	riseul.find('li:eq(0)').html(val);
	riseul.animate({top:"0"},300);
	setTimeout(function(){
		riseul.css('top','-31px').prepend('<li></li>').find('li:eq(13)').remove();
	},1000);
}


//摇红包
+(function($){
	var rocking = false,  //摇ing
		disable = false,  //不可摇
		power = 66,       //体力
		pack = true,      //是否有红包
		opening = false;  //开红包
	powerNum(power);
	$('.eet-peop').on('click',function(){
		var _this = $(this);
		if(power >= 20){
			$('.eet-peop').find('img').attr('src','../images/envelop/enve-peop1.png');
			if(!rocking){
				rocking = true;
				_this.addClass('rocking');
				setTimeout(function(){
					_this.removeClass('rocking');
					rocking = false;
					power = power - 20;
					powerNum(power);
					if(power < 20){
						$('.eet-peop').find('img').attr('src','../images/envelop/enve-peop2.png');
					}
					if(pack){
						$('.shake-pop').fadeIn(200);
					}else{
						$('.eet-peop').find('img').attr('src','../images/envelop/enve-peop3.png');  //没有摇到红包
					}
				},2000);
			}
		}
	});
	//开红包
	$('.shake-open').on('click',function(){
		if(!opening){
			opening = true;
			$(this).addClass('opening');
			setTimeout(function(){
				window.location.href='摇红包-红包打开.html';
			},3000);
		}
	});
	$('.shake-close').on('click',function(){
		if(!opening){
			$('.shake-pop').fadeOut(200);
		}
	});
	//体力显示
	function powerNum(power){
		$('.eet-power').html(power);
		$('.eet-bar').width(power + '%');
	}
})(jQuery);
</script>
</body>
</html>